<template>
  <div>
    <br />
    <br />
    <div class="tar">
      <el-row>
        <el-col :span="4" v-for="item in list" :key="item.id" :offset="1">
          <el-card
            class="cart"
            style="
              width: 300px;
              height: 330px;
              margin-top: 20px;
              margin-left: 80px;
              margin-bttom: 20px;
              margin-bottom: 20px;
            "
          >
            <div slot="header">
              
              <img
                :src="item.avatar"
                style="border-radius: 50%; height: 120px; width: 120px"
              />
              <div style="color: #666666; margin-top: 5px">
                <router-link :to="'/id/'+item.id" style="font-size: 18px">{{ item.name }}</router-link>
              </div>
              <div style="color: #999999; margin-top: 8px">高级总监</div>
            </div>
            <div style="color: #999999">
              <p style="font-size: 12px; font-family: SimSun;overflow: hidden;">
                {{item.intro}}
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <br />
    <br />
    <div class="page">
      <el-pagination
        @current-change="handlerCurrentChange"
        @size-change="changePageSize"
        :current-page="page"
        :page-size="size"
        :page-sizes="[8, 16, 32]"
        layout="sizes,prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <br />
  </div>
</template>
<script>
import TeacherApi from "@/api/teacher";
export default {
  data() {
    return {
      total: 10,
      list: {},
      page: 1,
      size: 8,
    
    };
  },
  created() {
    this.fecthData();
  },
  methods: {
    fecthData() {
      TeacherApi.getTeacherList(this.page, this.size).then((res) => {
        this.list = res.data.rows;
        this.total = response.data.total;
      });
    },

    handlerCurrentChange(page) {
      this.page = page;
      this.fecthData();
    },
    changePageSize(size) {
      this.size = size;
      this.fetchData();
    },
  },
};
</script>
<style scoped>
.body{
  padding: 0px;
  margin: 0px;
}
.cart:hover { 
  box-shadow: 8px 8px 8px #ccc;
}
a {
  color: #666666;
  transition: 0.5 s;
  text-decoration: none;
}
a:hover {
  color: #68cb9b;
  text-decoration: underline #68cb9b;
}
img:hover {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
</style>

